<template>
   <div ref="canvasContainer" class="box"></div>
</template>

<script>
import { onMounted, ref } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const back = '/imgs/back.png';
const front = '/imgs/front.png';
const top = '/imgs/top.png';
const bottom = '/imgs/bottom.png';
const left = '/imgs/left.png';
const right = '/imgs/right.png';
export default {
   setup() {
      const canvasContainer = ref(null);

      const loadTexture = (url) => {
         const loader = new THREE.TextureLoader();
         const texture = loader.load(url);
         const material = new THREE.MeshBasicMaterial({
            map: texture,
            side: THREE.DoubleSide,
         });
         return material;
      };

      onMounted(() => {
         // 初始化相机  
         const camera = new THREE.PerspectiveCamera(
            70,
            window.innerWidth / window.innerHeight,
            0.01,
            10
         );
         camera.position.z = 1;

         const scene = new THREE.Scene();

         const materials = [
            loadTexture(back),
            loadTexture(front),
            loadTexture(top),
            loadTexture(bottom),
            loadTexture(left),
            loadTexture(right),
         ];

         const geometry = new THREE.BoxGeometry(4, 4, 4);
         const mesh = new THREE.Mesh(geometry, materials);
         scene.add(mesh);

         const renderer = new THREE.WebGLRenderer({ antialias: true });
         renderer.setSize(window.innerWidth, window.innerHeight);
         canvasContainer.value.appendChild(renderer.domElement);

         // 动画渲染  
         const animate = (time) => {
            // mesh.rotation.x = time / 2000;  
            // mesh.rotation.y = time / 1000;  

            renderer.render(scene, camera);
            requestAnimationFrame(animate);
         };

         animate();

         const orbit = new OrbitControls(camera, renderer.domElement);
         orbit.enableZoom = false;
      });

      return {
         canvasContainer,
      };
   },
};
</script>

<style>
.box {
   width: 100%;
   height: 100vh;
}
</style>